<template>
  <div class="common-layout">
    <el-container>
      <!-- 左侧 -->
      <el-aside width="251px">
        <el-row>
          <el-col>
            <h4 class="logo">武汉光谷智慧交通管理系统</h4>
            <el-menu
              router
              active-text-color="#409eff"
              background-color="#fff"
              class="el-menu-vertical-demo"
              default-active="1"
              text-color="rgba(0, 0, 0, 0.692)"
            >
              <el-menu-item index="/manage/common">
                <el-icon><UserFilled /></el-icon>
                <span>普通用户</span>
              </el-menu-item>
              <el-menu-item index="/manage/traffic">
                <el-icon><Platform /></el-icon>
                <span>交管部门</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <!-- 右侧 -->
      <el-container>
        <!-- 头部 -->
        <el-header>
          <el-button
            color="#409eff"
            :icon="Position"
            style="margin-right: 20px"
            @click="goBack"
            >返回首页</el-button
          >
          <div class="demo-basic--circle">
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-avatar> user </el-avatar>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleUpdatePassword"
                    >修改密码</el-dropdown-item
                  >
                  <el-dropdown-item divided @click="getQuitLogin"
                    >退出登录</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <!-- 主体内容 -->
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
    <!-- 修改密码 -->
    <el-dialog
      v-model="userUpdatePassword"
      title="修改密码"
      :close-on-click-modal="false"
      class="password-dialog"
    >
      <el-form
        class="password-form"
        ref="loginFormUpdate"
        :model="userPassword"
        :rules="userPasswordRules"
        label-width="20px"
      >
        <el-form-item>
          <el-input
            placeholder="请输入用户名"
            v-model="userPassword.username"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="请输入原密码"
            v-model="userPassword.password"
            show-password
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="newpassword">
          <el-input
            placeholder="请输入新密码"
            v-model="userPassword.newpassword"
            show-password
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="confirmnewpassword">
          <el-input
            placeholder="再次确认密码"
            v-model="userPassword.confirmnewpassword"
            show-password
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="submitUpdate" type="primary">修改密码</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  Position,
  Menu as IconMenu,
  UserFilled,
  Platform,
  Search,
  Plus,
} from "@element-plus/icons-vue"
import router from "@/router"
import { onMounted } from "vue"
//导入修改密码的hooks
import { updatePassword } from "../../components/Hooks/updatePassword"
//存储登录时候的id,用户名和用户等级
import { useUserStore } from "../../stores/useUserStore"
//导入解析token的hooks
import { Token } from "../Home/Hooks/Token"
//导入退出登录的hooks
import { quitLogin } from "../../components/Hooks/quitLogin"
const UserStore = useUserStore()
const { getToken } = Token()
onMounted(() => {
  getToken()
})
//返回首页
function goBack() {
  router.push("/home")
}
//点击修改密码
const {
  handleUpdatePassword, //点击修改弹框状态
  userUpdatePassword, //弹框状态
  userPassword, //接收input内容
  userPasswordRules, //表单验证规则
  submitUpdate, //点击确认修改
  loginFormUpdate, //表单验证
} = updatePassword()
//点击退出登录
const { getQuitLogin } = quitLogin()
</script>

<style scoped>
/* 左侧侧边栏 */
.el-aside {
  height: 100vh;
  background-color: #fff;
}
.el-row {
  height: 100vh;
  border-right: 1px solid #ccc;
}
.el-menu {
  border-right: 0;
}
.logo {
  text-align: center;
  line-height: 59px;
  font-size: 19px;
  color: rgba(0, 0, 0, 0.692);
  border-bottom: 1px solid #ccc;
}

/* 右侧 */
.el-container {
  width: 100%;
}
.el-header {
  display: flex;
  justify-content: end;
  align-items: center;
  height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}
.el-button {
  color: #fff;
}

/* 右侧卡片 */
.el-main {
  height: 100%;
  background-color: #eff1f4;
}
</style>
